<script setup>
  import {
    ref,
    watch,
    onMounted,
    onBeforeMount
  } from 'vue'

  import {
    AppstoreAddOutlined,
    FontSizeOutlined,
    VideoCameraOutlined,
    SaveOutlined,
    MergeCellsOutlined
  } from '@ant-design/icons-vue';

  import Codemirror from 'vue-codemirror6'

  import { vue } from '@codemirror/lang-vue'

  import { oneDark } from '@codemirror/theme-one-dark'
  import models from '@/build/model'

  const lang = vue()

  import { storeToRefs } from 'pinia'
  import { useModelStore } from '@/store/modules/model'

  const store = useModelStore()
  const storeRef = storeToRefs(store)

  const extensions = ref([vue(), oneDark])


  const code = ref('')

  onMounted(() => {
    const tempType = storeRef['fileConfig'].value.tempType

    handleRender(tempType)
  })

  watch(store, val => {

    const tempType = storeRef['fileConfig'].value.tempType

    if (!tempType) {
      return
    }

    handleRender(tempType)
  }, { immediate: false })

  const handleRender = type => {
    // console.log()
    const { transformer } = models[type]

    const fileConfig = storeRef['fileConfig'].value
    const modelConfig = storeRef['modelConfig'].value

    // console.log(1234, fileConfig, modelConfig)

    code.value = transformer(fileConfig, modelConfig)
  }
</script>

<template>
  <div class="code-editor__wrapper">
    <div class="header">
      <a-space>
        <a-button type="primary">
          <template #icon><SaveOutlined /></template>导出
        </a-button>
      </a-space>
    </div>
    <div class="content">
      <Codemirror
          v-if="code !== ''"
          v-model="code"
          class="code-mirror"
          :tabSize="2"
          :autofocus="false"
          :indent-with-tab="true"
          :scrollbarStyle="null"
          :extensions="extensions"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.code-editor__wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;


  .header {
    width: 100%;
    height: 48px;
    border-bottom: 1px solid #DCDFE6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10px;
  }

  .content {
    width: 100%;
    flex: 1 0 0;
    padding: 10px 10px 10px 0;
    overflow-y: auto;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  :deep(.code-mirror) {
    width: 100%;
    height: 100%;
    display: block !important;
    border: 1px solid #d9d9d9;
    border-radius: 8px;

    .cm-editor {
      width: 100%;
      height: 100%;
      outline: none;
      border: 1px solid transparent;

      .cm-scroller {
        border-radius: 6px;
      }
    }
  }
}
</style>
